forum

home / developersection / forums / align an element of a div to the center

Ask Question

Align an element of a div to the center

Anonymous User 431 20-Jul-2021

How to center a div element vertically and horizontally?

css-css3 html  css-css3 
Updated on 20-Jul-2021
Anonymous User

Software Developer Trainee

I am a content writter !

Follow
Can you answer this question?
Answer

1 Answers

Ethan Karla

Ethan Karla

21-Jul-2021

You can easily an element of a div using display-flex property.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

Let's understand it with the help of an example : 

<!DOCTYPE html>

<html lang ='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <title>Flexbox</title>

    <style>

        body {

            margin-left: 30%;

            margin-right: 30%

        }

        .d-flex {

            display: flex;

        }

        .justify-content-center {

            justify-content: center;

        }

        #square {

            width: 100px;

            height: 100px;

            background : black;

        }

        .flex-column {

            flex-direction: column;

        }

        .align-items-center {

            align-items: center;

        }

    </style>

</head>

<body>

    <div class='d-flex justify-content-center flex-column align-items-center'>

        <h3>Flexbox Property</h3>

        <p>This paragraph and below square will be centered</p>

        <div id='square'></div>

    </div>

</body>

</html>

Hope this information will be helpful for you.

Happy Coding!

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy